<template>
  <!-- 添加产品 -->
  <div class="add-one">
    <a-modal title="添加用户" :visible="props.show" @ok="handleOK" @cancel="close">
      <a-form :label-col="{span:6}" :wrapper-col="{span:12}">
        <a-form-item label="账号">
          <a-input v-model:value="addForm.username" />
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-model:value="addForm.password" />
        </a-form-item>
        <a-form-item label="角色">
          <!-- {{characterInfo}} -->
          <a-select v-model:value="addForm.character" style="width:220px">
            <a-select-option v-for="item in characterInfo" :key="item._id" :value="item._id">{{item.title}}</a-select-option>

          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import store from "../../../store/index";
import { defineComponent, reactive } from "vue";
import { user } from "../../../service";
import { result, deepClone } from "@/utils/result";
// import { message } from "ant-design-vue";
const formData = {
  username: "",
  password: "",
  character: "",
};
export default defineComponent({
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const { characterInfo } = store.state;
    console.log('characterInfo ',characterInfo );
    //表单默认数据
    const addForm = reactive(deepClone(formData));

    addForm.character=characterInfo[1]._id //设置角色下拉框的默认值
    const close = () => {
      context.emit("update:show", false);
    };
    const handleOK = async () => {
      const form = deepClone(addForm); //深拷贝一个对象出来
      //   console.log("打印addForm值", addForm);

      const res = await user.add(form.username, form.password,form.character);
      result(res).success((val, { data }) => {
        //清空表单数据
        Object.assign(addForm, formData); //assign合并 将formData中数据合并到addForm对象
        // message.success(data.msg);
        close();
        context.emit("getList");
      });
    };

    return {
      addForm,
      handleOK,

      props,
      close,
      characterInfo,
    };
  },
});
</script>

<style lang='less'>
</style>